<template>
  <div class="exam-wrap">
    <MyTabs :tab-list="tabList"></MyTabs>
    <div>
      <el-table :data="list" size="mini" :key="type">
        <el-table-column prop="paper_title" label="试卷名称"></el-table-column>
        <el-table-column label="参考人姓名">
          <template slot-scope="scope">
            <span class="name" @click="goUser(scope.row.user_id)">{{ scope.row.nick_name }}</span>
          </template>
        </el-table-column>
        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              icon="el-icon-document"
              v-if="status === 1"
              @click="handleExamTopic(scope.row.record_id, scope.row.paper_id)"
              >批阅</el-button
            >
            <el-button
              type="text"
              size="small"
              v-else
              @click="handleExamTopic(scope.row.record_id, scope.row.paper_id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EduPagination @handleCurrentChange="handleCurrentChange" align="right"></EduPagination>
  </div>
</template>

<script>
import MyTabs from '../../../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    MyTabs,
    EduPagination
  },
  data() {
    return {
      tabList: [
        {
          title: '考试'
        }
      ],
      list: [],
      status: 0
    }
  },
  created() {
    this.getPaperList()
    this.status = parseInt(this.$route.query.status)
  },
  methods: {
    getPaperList() {
      this.$api.getExamPaperUsers(
        {
          status: this.$route.query.status,
          paper_id: this.$route.query.id,
          page: this.$store.getters['paginate/page'],
          count: 12
        },
        res => {
          this.handleGetDataSucc(res)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getPaperList()
    },
    handleGetDataSucc(res) {
      const { data } = res
      this.list = data.data
      this.$store.dispatch('paginate/setPaginate', {
        listRows: 12,
        total: data.total
      })
    },
    handleExamTopic(record_id, paper_id) {
      this.$router.push({
        path: '/my/classes/correcting/exam/topic',
        query: {
          record_id: record_id,
          paper_id: paper_id
        }
      })
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.exam-wrap {
  .name {
    cursor: pointer;
  }
}
</style>
